<template>
  <var-app-bar fixed color="#fff" text-color="#000">
    <template #default>
      <h2>推荐动态</h2>
    </template>
    <template #right>
      <var-icon
        @click="router.push('/publish')"
        :size="24"
        name="plus-circle-outline"
      />
    </template>
  </var-app-bar>

  <var-list
    style="padding-top: 40px"
    :finished="isLoadAll"
    v-model:loading="loading"
    @load="loadMore"
  >
    <DynamicItem @delete="handleDelete" :dataList />
  </var-list>
  <var-back-top :duration="300" :bottom="80" />
</template>

<script setup lang="ts">
import { useListLoad } from '@/hooks/useListLoad'
import { getDynamicList } from '@/api'
import DynamicItem from '@/components/DynamicItem.vue'

const router = useRouter()

const getData = async (reset = false) => {
  reset && resetFn()
  const params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    sort: 'desc',
    status: 1
  }
  loading.value = true
  const res = await getDynamicList(params)
  dataList.value = dataList.value.concat(res.list)
  isLoadAll.value = !!(res.total <= dataList.value.length)
  loading.value = false
}

const {
  loading,
  dataList,
  pageNum,
  pageSize,
  isLoadAll,
  reset: resetFn,
  loadMore
} = useListLoad(getData)

const handleDelete = id => {
  dataList.value = dataList.value.filter(item => item.id !== id)
}
</script>

<style scoped lang="scss"></style>
